<template>
    <header>
        <h2>设备管理系统</h2>
        <el-dropdown @command="onCommand">
            <div class="menu-link">
                {{name}}
                <i class="el-icon-arrow-down" />
            </div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="password">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-dialog append-to-body :visible.sync = 'show' :close-on-press-escape="false" :close-on-click-modal="false" title="修改密码" width="500px">
            <div class="dialog-content">
                <el-input type="password" placeholder="旧密码" v-model="formData.oldPw"/>
                <el-input type="password" placeholder="新密码" v-model="formData.newPw1"/>
                <el-input type="password" placeholder="确认新密码" v-model="formData.newPw2"/>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>

    </header>
</template>

<script>
export default {
    props:['name'],
    data(){
        return{
            show: false,
            formData:{
                oldPw:'',
                newPw1:'',
                newPw2:''
            }
        }
    },
    methods:{
        onCommand(c){
            this[c]();
        //或者
            // if(c==='logout'){
            //     this.logout();
            // }else if(c==='password'){
            //     this.password();
            // }
        },
        logout(){
            console.log('退出登录')
            this.axios.post('/logout').then(()=>{
                this.$router.push('/login')
            })
        },
        password(){
            console.log('修改密码')
            this.show = true
        },
        submit(){
            const {oldPw,newPw1,newPw2} = this.formData;
            if(!oldPw){
                return this.$message.error("请输入旧密码")
            }
            if(!newPw1){
                return this.$message.error("请输入新密码")
            }
            if(newPw2!==newPw1){
                return this.$message.error("两次新密码不一致")
            }
            this.axios.post('password-reset',{
                oldPw,
                newPw:newPw1
            }).then(data=>{
                if(!data.code){
                    this.$message.success('密码修改成功')
                }
                this.show = false;
            })
        }
    }
}
</script>

<style lang="sass" scoped>
header
    display: flex
    justify-content: space-between
    align-items: center
    color: #fff
    padding: 0 20px
    h2
        font-size: 18px
        padding-left: 25px
        background: url(~@/assets/img/logo.png) no-repeat center left
        background-size: 18px
    .menu-link
        color: #fff
.dialog-content
    .el-input
        margin-bottom: 15px
</style>
